<template>
    <div class="froms" v-loading="listLoading">
          <el-dialog  :title="title"  :visible.sync="Visible" width="30%" :before-close="handleClose">

            <el-form :model="roleData"  style="width:80%" ref="roleData" :rules="rules">
                <el-form-item  label="角色ID" :label-width="labelwidth" prop="roleid">
                    <el-input  v-model="roleData.roleid">
                    </el-input>
                </el-form-item> 

                <el-form-item label="角色名称" :label-width="labelwidth" prop="rolename">
                    <el-input v-model="roleData.rolename">
                    </el-input>
                </el-form-item>

                <el-form-item label="角色编码" :label-width="labelwidth" prop="rolecode">
                    <el-input v-model="roleData.rolecode">
                    </el-input>
                </el-form-item>
            
                <el-form-item label="选择菜单" :label-width="labelwidth" prop="manage">

                  
                    <el-tree  class="eltree" 
                    :data="treeData"
                    :props="treeProps"
                    show-checkbox
                    default-expand-all
                    highlight-current
                    node-key="menuid"
                    ref="reftree"	
                    >
                    </el-tree>
                </el-form-item>
            </el-form> 
             <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('roleData')">取 消</el-button>
                <el-button type="primary" @click="AddRole('roleData')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>

 
export default{
     
    data(){
        return {
            treeData:[],
            treeProps:{
                children: 'children',
                label: 'menuname',
                value:'menuid'
            },
            id:-1,
            title:'角色添加',
            Visible:false,
            labelwidth:'80px',
            roleData:{},
            listLoading:false,
            rules:{
                roleid:[
                    {required:true,message:'请输入角色ID',trigger:'change'}
                ],
                rolename:[
                    {required:true,message:'请输入角色名称',trigger:'change'}
                ],
                rolecode:[
                    {required:true,message:'请输入角色编码',trigger:'change'}
                ]
            }
        }
    },
    mounted(){
        this.GetTreeData();
    },
    methods:{

         GetTreeData(){
            var _this = this;
            _this.$api.Menutree().then((res)=>{ 
                if(res.result =='ok'){
                    _this.treeData =res.data;
                }    
            }).catch((err)=>{ 
                _this.$message({ message:'数据获取失败', type:'error'});
            });
         },
         //角色添加
         AddRole(roleData){
            var _this = this;
            _this.$refs[roleData].validate((valid)=>{             
            if(valid){               
                // 开启动画
                _this.listLoading = true;
                
                // 获取树选中的节点ID
                var  GetTreeId = _this.$refs.reftree.getCheckedKeys();
                var  rolearr = '';
                 if(GetTreeId.length>0){

                     for(var i =0;i<GetTreeId.length; i++){
                        rolearr+= GetTreeId[i]+",";
                     }
                     _this.roleData.menuid =  rolearr.substr(0,rolearr.length-1);
                 }
               
               _this.$api.RoleAdd(_this.roleData).then((res)=>{
                //关闭动画
                _this.listLoading = false;                      
                // 数据返回成功
                if(res.result=='ok'){                     
                    _this.$message({message:res.msg,type:'success'})
                    _this.Visible =false;                          
                    // 调用父组件的获取数据方法
                    _this.$parent.getResult();
                    _this.resetForm();
                }
                }).catch((err)=>{
                    _this.$message({  message:err.msg,   type:'error'});
                })   
            }else{            
                console.log("失败");
            }
            });    
         },
         EditRole(){
             var data = {'roleid':this.id};
             this.$api.RolerolegetID(data)
             .then((res)=>{
                this.roleData =  res.data;
             })
             .catch((err)=>{
                this.$message({
                     message:'错误'
                 })
             });

         },
         // 取消
        resetForm(){    
           
          this.$refs.roleData.resetFields();
          this.Visible =false;
        },
        handleClose(done){
            done();
            this.resetForm();
        },
        // 清空
        Treereset(){
            if(this.$refs.reftree){
                this.$refs.reftree.setCheckedKeys([]);
            }
        },
    }
}
</script>

<style>
.eltree{
    height: 300px;
    overflow:auto;
    height:200px;
}
 
</style>